<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>百叶窗</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        overflow: hidden;
        margin: 0;
        background-image: linear-gradient(to right, #434343 0%, black 100%);
      }
      .container {
        display: flex;
        width: 90vw;
      }
      .panel {
        flex: 1;
        height: 80vh;
        border-radius: 50px;
        margin: 10px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        transition: all 0.5s ease;
        cursor: pointer;
        box-shadow: 0px 10px 20px rgba(252, 250, 250, 0.5);
      }
      .panel.active {
        flex: 10;
      }
      @media (max-width: 680px) {
        .container {
          width: 100vw;
        }
        .panel:nth-of-type(4),
        .panel:nth-of-type(5) {
          display: none;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div
        class="panel active"
        style="background-image: url(./imgs/wallhaven-01.png)"
      ></div>
      <div
        class="panel"
        style="background-image: url(./imgs/wallhaven-02.jpg)"
      ></div>
      <div
        class="panel"
        style="background-image: url(./imgs/wallhaven-03.png)"
      ></div>
      <div
        class="panel"
        style="background-image: url(./imgs/wallhaven-04.jpg)"
      ></div>
      <div
        class="panel"
        style="background-image: url(./imgs/wallhaven-05.jpg)"
      ></div>
      <script>
        let panels = document.querySelectorAll('.panel');
        // 给每个类名为 panel 的盒子设置点击事件
        panels.forEach((panel) => {
          panel.onclick = () => {
            // 排他 移除所有 active 类名
            removeActiveClasses();
            panel.classList.add('active');
          };
        });
        function removeActiveClasses() {
          panels.forEach((panel) => {
            panel.classList.remove('active');
          });
        }
      </script>
    </div>
  </body>
</html>
